<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title></title>
    <link rel="stylesheet" href="../../styles/h5/reset.min.css"/>
    <link rel="stylesheet" href="../../styles/h5/errortankuang.css"/>
    <!--以上为公共css样式-->
    <link rel="stylesheet" href="../../styles/h5/index.css"/>

    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery-1.9.1.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery.modal.js"></script>
    <script charset="utf-8" type="text/javascript">
        countRem();
        function countRem(desW) {
            var desWh = desW || 750,
                    winW = document.documentElement.clientWidth;
            document.documentElement.style.fontSize = winW / desWh * 100 + "px";
        }
        $(window).resize(function () {
            countRem();
        });
    </script>
    <!-- <script charset="utf-8" type="text/javascript" src="../../scripts/h5/public.js"></script> -->
    <!--以上为公共js文件-->
</head>
<body>
<div class="zz-bill-list" style="height: .9rem">
    <ul>
        <li class="zz-trade zz-color-098fe6">立马付交易</li>
        <li class="zz-switch"><a class="zz-POS-reade" href="">POS机交易</a></li>
    </ul>
</div>
<div class="zz-list zz-list-bank zz-list-youhua">
    <ul>
        <!--<li>
            <a href="javascript:;">
                <i class="zz-payment-icon zz-weixin"></i>
                <p class="zz-bankList">
                    <span class="zz-bank">zhang***@qq.c.......0000000om</span>
                    <span class="zz-balance zz-transaction-color">+100000.12</span>
                </p>
                <p class="zz-timeList clear">
                    <span class="zz-time">2017-04-13 10:00:00</span>
                    <span class="zz-success">收款成功</span>
                </p>
                <i class="zz-right-arrow"></i>
                <p class="zz-payType clear">
                    微信公众号支付
                </p>
            </a>
        </li>-->
    </ul>
</div>
<input type="button" class="footer zz-look-more" value="加载更多"/>
<div class="footer-bottom"></div>
<div class="zz-screen-icon"></div>
<!--点击筛选出现的列表-->
<div class="zz-pay" style="display: none">
    <div>
        <span class="zz-payment">支付方式</span>
        <p>
            <span class="zz-select zz-pathnot" payType="1"></span>
            <span>立马付-微信</span>
        </p>
        <p>
            <span class="zz-select zz-pathnot" payType="2"></span>
            <span>立马付-支付宝</span>
        </p>
        <p class="zz-lastP">
            <span class="zz-select zz-pathnot" payType="3"></span>
            <span>微信公众号支付</span>
        </p>
    </div>
    <!--<div>
        <span class="zz-payment">支付状态</span>
        <p>
            <span class="zz-select zz-pathnot"></span>
            <span>有退款</span>
        </p>
        <p>
            <span class="zz-select zz-pathnot"></span>
            <span>无退款</span>
        </p>
    </div>-->
    <span class="zz-bg"></span>
    <div class="zz-notMargin clear">
        <p class="zz-notPaddingBottom">
            <span class="zz-select zz-pathnot zz-all-path" payType="0"></span>
            <span>全选</span>
        </p>
        <!-- a class="footer zz-footTop" href="javascript:;" style="margin-top:.4rem">确认</a> -->
        <a class="footer zz-footTop" href="javascript:;" id="queren" style="margin-top:.4rem">确认</a>
    </div>
</div>
<div class="zz-mask" style="display: none"></div>
</body>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/utils.js"></script>
<!-- <script charset="utf-8" type="text/javascript" src="../../scripts/h5/index.js"></script> -->
<!-- <script charset="utf-8" type="text/javascript" src="../../scripts/h5/public.js"></script> -->
<script charset="utf-8" type="text/javascript">
    var queryURLParameter = utils.queryURLParameter();
    var storeId = queryURLParameter.storeId;
    var orderDate = queryURLParameter.orderDate;
    var tradingStore = queryURLParameter.tradingStore;
    var posReportId = queryURLParameter.posReportId;
    //var payType = "";
    var payType = [];
    var currentPage = 1;
    var pageSize = 10;
    var $pay_select = $(".zz-pay .zz-select");
    var $all_path = $(".zz-all-path");
    var $lookMore = $(".zz-look-more");
    var $mask = $(".zz-mask");
	var $pay = $(".zz-pay");
    var flag = true;
    var data = '';
    var payName = '';
    
    //跳转pos交易列表
    $(".zz-POS-reade").attr("href","../../html/h5/transactionPOSList.html?storeId="+storeId+"&orderDate="+orderDate+"&tradingStore="+tradingStore+"&posReportId="+posReportId);
    
    $("title").html(orderDate);
    var date = orderDate.slice(0,4)+""+orderDate.slice(5,7)+""+orderDate.slice(8,10);
    
    if(!posReportId){
        $(".zz-bill-list").hide();
    }
    //var date = '';

    function everyDay() {
        var str = '';
        for (var i = 0; i < data.length; i++) {
            var curData = data[i];
            str += '<li>';
            str += '<a href="../../html/h5/refundOrderMsg.html?tradeNo=' + curData['tradeNo'] + '&tradingStore=' + tradingStore + '">';

            if (curData["payType"] == 1) {
                str += '<i class="zz-payment-icon zz-weixin"></i>';
                payName = "立马付-微信"
            } else if (curData["payType"] == 2) {
                str += '<i class="zz-payment-icon zz-zhifubao"></i>';
                payName = "立马付-支付宝"
            } else if (curData["payType"] == 3) {
                str += '<i class="zz-payment-icon zz-weixin"></i>';
                payName = "微信公众号支付"
            } else {
                str += '<i class="zz-payment-icon"></i>';
            }

            str += '<p class="zz-bankList">';
            str += '<span class="zz-bank">' + curData["paymentUserName"] +'('+payName+')' + '</span>';
            str += '<span class="zz-balance zz-transaction-color">+' + curData["amountY"] + '</span>';
            str += '</p>';
            str += '<p class="zz-timeList clear">';
            str += '<span class="zz-time">' + curData["inTime"] + '</span>';
            str += '<span class="zz-success">收款成功</span>';
            str += '</p>';
            str += '<i class="zz-right-arrow"></i>';
            str += '</a>';
            str += '</li>';
        }

        if (flag) {
            $(".zz-list-bank>ul").html(str);
        } else {
            $(".zz-list-bank>ul").append(str);
        }
    }

    bindHTML();
    function bindHTML() {
    	payType = JSON.stringify(payType);
        $.ajax({
            url: utils.ajaxUrl() + "h5/billDetail/getDayPayOrderList",
            async: false,
            data: {
                storeId: storeId,
                payType: payType,
                orderDate: date,
                currentPage: currentPage,
                pageSize: pageSize
            },
            type: 'get',
            success: function (res) {
                var res = JSON.parse(res);
                console.log(res);
                if (res && res.retCode == '1') {
                    data = res["resultList"];

                    if (data.length < pageSize) {
                        $lookMore.attr("disabled", "true").val("没有更多交易了").css({"border":"none","background":"none"});
                    } else {
                        $lookMore.removeAttr("disabled").val("加载更多").css({"border":"1px solid #ddd","background":"#f4f4f4"});
                    }
                    everyDay();
                } else {
                    new $.modal({
                        content: res.retMsg,//弹框内容
                        showcontent: true,//false为弹出框组件二，true为弹出框组件一
                    }).show();
                    $lookMore.attr("disabled", "true").val("没有更多交易了").css({"border":"none","background":"none"});
                }
            }
        });
    }

    //筛选 显示
    $(".zz-screen-icon").click(function () {
        $pay.show();
        $mask.show();
    });
    /**
     * check 点击选中
     * @param _this 点击的元素
     */
    function check(_this) {
        if (_this.hasClass("zz-path")) {
            _this.removeClass("zz-path");
            $all_path.removeClass("zz-path");

        } else {
            _this.addClass("zz-path");
        }

        if (_this.hasClass("zz-all-path")) {
            var $sel = _this.parent().parent().siblings().find(".zz-select");
            if (_this.hasClass("zz-path")) {
                $sel.addClass("zz-path");
            } else {
                $sel.removeClass("zz-path");
            }
        }
        //全都选了之后 全选也点亮
        var a = $(".zz-pay .zz-path").length;
        var b = $pay_select.length - 1;
        if (a == b) {
            $all_path.addClass("zz-path");
        }
    }

    $(".zz-pay p").click(function () {
        var $this = $(this).find(".zz-select");
        check($this);
    });

    $("#queren").click(function () {
        currentPage = 1;
        flag = true;
        $pay.hide();
        $mask.hide();
        payType = [];
        if ($pay.find('.zz-path').length == 0) {
            return
        }
        if ($(".zz-all-path").hasClass("zz-path")) {
            //payType.push('0');
            bindHTML();
            return
        }

        $(".zz-path").each(function () {
            payType.push($(this).attr("payType"));
        });
        bindHTML();
    });

    $lookMore.click(function () {
    	payType = JSON.parse(payType);
        currentPage++;
        flag = false;
        bindHTML();
    });

</script>
</html>